<template>
		<div class="cate-tab3 swiper">
				<!-- 计算属性的返回结果[重组的数组]，丢给循环操作 -->
				<ol class="swiper-wrapper">
					<li v-for="( list , index ) in pages" :key="index" class="swiper-slide">
						<router-link to="/" v-for="item in list" :key="item.id">
							<template v-if="item.id<18">
								<img :src="item.imgURL" />
								<aside>
									<h3>{{item.title}}</h3>
									<label>{{item.msg}} | <em>{{item.day}}天</em></label>
									<p>￥{{item.price}}起</p>
								</aside>
							</template>
							<template v-if="item.id>17">
								<aside>
									<h4>{{item.en}}</h4>
									<span>查看更多></span>
								</aside>
							</template>
						</router-link>
					</li>
				</ol>
				
			</div>
</template>

<script>
	//1.引入vue周期函数
		import {
			onMounted
		} from 'vue';
		//2.引入Swiper的动态组件
		import Swiper, {
			Autoplay,
			EffectCoverflow,
			EffectCube,
			Pagination,
		} from 'swiper';
		//3.说明swiper组件应用配置
		Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);
	
	export default{
		name:"CategoryTab3",
		props:['propsCategoryTab3'],
			data(){
					return{
						tab1List : [
						]
					}
				},
				created() {
					this.tab1List=this.propsCategoryTab3
					let that=this
					this.axios.get('api/dataHome.json').then( (res)=>{
						let data = res.data.Homemsg[0];
						// 提取banner组件的数据
						that.tab1List = data.CategoryList.tab1List
					}).catch((error)=>{
						console.log(error)
					})
				},
				computed:{
							// 程序将其当成是属性而不是函数，是个变量【循环/判断】
							pages(){
								let arr = [];	//空数组，目的是：重组一个二维数组
								let num = 6; 	//每页条数
								// 将原数组遍历
								this.tab1List.forEach( (item , index)=>{
									// i：每页的页码
									let i = Math.floor( index / num );
									if( !arr[i] )	arr[i] = [];
									arr[i].push( item );
								} );
								return arr;
							}
						},
				updated(){
					new Swiper('.cate-tab3', {
						loop:true,
						//修改swiper自己或者子元素时自动初始化swiper
						observer:true,
						//修改swiper容器，自动初始化swiper
						observerParents:true
					})
				}
	}
</script>

<style scoped>
	a{
			color:#000000;
			text-decoration: none;
		}
		.cate-tab3{
			height: 9.2rem;
		}
		.cate-tab3 ol{
			width: 100%;
			height: 90%;
		}
		.cate-tab3 ol li{
			width: 90%;
			height: 100%;
			margin-left: 1%;
		}
		.cate-tab3 img{
			width: 90%;
			height: 2.5rem;
			border-radius: 0.2rem;
		}
		.cate-tab3 ol li a{
			margin-top: 0.15rem;
			float: left;
			width: 33%;
			margin-top: 0.5rem;
			position: relative;
		}
		.cate-tab3 aside h3{
			margin: 0.1rem;
			font-size: 0.35rem;
			font-weight: bold;
			width: 2.5rem;
		}
		.cate-tab3 aside label{
			color: white;
			position: absolute;
			top: 0.5%;
			right: 10%;
			border-radius: 0 0.2rem 0 0.2rem;
			font-size: 0.26rem;
			padding: 0.1rem;
			background-color: rgba(0, 0, 0, 0.7);
			display: -webkit-box;
			-webkit-line-clamp: 1;/*与高度有关*/
			/* 超出盒子外的文本用省略号代替 */
			-webkit-box-orient: vertical;
		}
		.cate-tab3 aside p{
			font-size: 0.3rem;
			font-weight: bold;
			color: white;
			position: absolute;
			top: 2rem;
			left: 0.2rem;
		}
		.cate-tab3 a:last-child h4
		{
			display: block;
			margin: 0.5rem auto;
			font-size: 0.3rem;
			font-weight: bold;
			text-align: center;
			width: 1.5rem;
			border-bottom: 0.2rem solid #ffd825;
		}
		.cate-tab3 a:last-child span{
			margin: 0 auto;
			display: block;
			text-align: center;
			background-color: #ffd825;
			padding: 0.1rem;
			border-radius: 0.2rem;
			width: 1.5rem;
			font-weight: bold;
		}
</style>
